import {Component} from "react";
import React from "react";
import axios from "axios"
import './mediaDetail.css'
import {NavLink, Redirect, Route} from "react-router-dom";
import ReactPlayer from 'react-player'

import Page from "../Page";
// import {nanoid} from "nanoid"
export default class mediadetails extends Component{
    state = {
        path:[],
        // path : require("../../../img/cinatest2.mp4")
        a: "",
        b:"",
        response:{},
        fileSize:"",
        range:"",
        file:{}
    }
    fileBlob = React.createRef();
    componentDidMount = ()=>{
        this.setState({'videoPath':'http://192.168.56.1:7001/scms-edit/test/ftp/download?fileName='+this.props.location.state})
        console.log("videoPath == "+ this.state.videoPath)
        console.log("encodeURI.videoPath == "+ encodeURI(this.props.location.state))
    }
    getFileSize = ()=>{
        axios.request({
            method:"post",
            headers:{'Range': "0-0"},
            url: "http://172.19.132.75:7001/scms-edit/test/ftp/filesize?fileName=cinatest3.mp4&buildRange=1",
        }).then((response)=>{
            console.log("文件长度: "+response.data)
            this.buildRange(response.data)
            this.setState({fileSize:response.data})
            this.getPlay()
        })
    }
    buildRange = (fileSize)=>{
        let segmentSize =  2 * 1024 * 1024;
        let i = 0;
        let offset = 0;
        let range = "bytes="
        let num =fileSize/segmentSize
        let prefileSize = fileSize
        let end = 0
        for (i = 1; i < num; i++) {
            if(fileSize>segmentSize){
                end = offset + segmentSize
                range = range+offset+"-"+end+","
                fileSize=fileSize-segmentSize
                offset = offset + segmentSize + 1
            }else{
                range = range+offset+"-"+prefileSize
            }

        }
        this.setState({range:range})

    }
    // upLoad = ()=>{
    //     this.setState({file:this.fileBlob.current.files[0]})
    //     console.log("ref文件为:"+this.fileBlob.current.files[0])
    //     if(this.fileBlob==null){
    //         console.log("文件不存在")
    //         return
    //     }
    //     const file = this.fileBlob.current.files[0]
    //     let formData = new FormData()
    //     formData.append('file', file)
    //     axios.request({
    //         method:"post",
    //         data:formData,
    //         // data:this.fileBlob.current.value,
    //         headers:{'Content-Type':'multipart/form-data'},
    //         url: "http://172.19.132.75:7001/scms-edit/test/ftp/upload"
    //     }).then((response)=>{
            

    //     })
    // }
    upLoad = ()=>{
        this.setState({file:this.fileBlob.current.files[0]})
        console.log("ref文件为:"+this.fileBlob.current.files[0])
        if(this.fileBlob==null){
            console.log("文件不存在")
            return
        }
        const file = this.fileBlob.current.files[0]
        let formData = new FormData()
        formData.append('file', file)
        axios.request({
            method:"post",
            data:formData,
            // data:this.fileBlob.current.value,
            headers:{'Content-Type':'multipart/form-data'},
            url: "http://172.19.132.75:7001/scms-edit/test/ftp/upload"
        }).then((response)=>{

        })
    }


    getPlay = (obj)=>{
        axios.request({
            method:"post",
            // url:this.state.proxy +"/deletebyid",
            headers: {
                // 'Content-Type': 'multipart/form-data',
                'Range': this.state.range,
            },
            url: "http://172.19.132.75:7001/scms-edit/test/ftp/download?fileName="+this.props.NavLink.state.videoName,
            responseType: "blob"
        }).then(response => {
            console.log("response.headers的start:")
            // this.getPlay(response.start,response.end)
            // this.getPlay()
            this.createMiniQrcode(response.data)
            this.setState({a:1,response:response})
        })
        // this.setState({path: [...this.state.path,require("../../../img/cinatest2.mp4")] })
    }



    // 生成对应的虚拟url
    createMiniQrcode = (blob)=> {
        // let img = document.createElement('mp4')
        // img.onload = function (e) {
        //     try {
        //         return img.src
        //     } catch (error) {
        //         return window.URL.revokeObjectURL(img.src)
        //     }
        //     // 元素的onload 事件触发后将销毁URL对象, 释放内存。
        // }


        let url = null
        const binaryData = [];
        binaryData.push(blob);
        url = window.URL.createObjectURL(new Blob(binaryData,{type:'video/mpeg4;chartset=UTF-8'}));
        console.log("blob"+blob)
        console.log("url: "+url)

        // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
        // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
        // img.src = window.URL.createObjectURL(blob)
        // document.querySelector('.imgQrCode').appendChild(img)
        this.setState({path: [url]})
        // this.setState({path: [require("../../../img/cinatest2.mp4")]})
        // console.log("img.src = ",img.src)
    }



    goback = ()=>{
        window.history.back()
    }

    render(){
        return(
            <div className="main_content ">
                <span className="title">
                媒资详情
                </span>
                <div class="mediamanage_content">
                    <button type="button" class="footer_btn_red mediadetails_butten goback_btn_position_left" onClick={()=>{this.goback()}}>
                        返回
                    </button>

                    <div className='player-wrapper'>
                    <ReactPlayer
                        className='react-player'
                        // url='https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'
                        // url='http://192.168.56.1:7001/scms-edit/test/ftp/download?fileName=cinatest3.mp4'
                        url={this.state.videoPath}
                        width='80%'
                        height='80%'
                        fluid = {false}
                        playing={true}
                        controls
                    />
                </div>
                    {/* <div class="details_content details_content_position">
                    <div class="details_content details_content_position">
                        <table class="table table-condensed">
                        <tbody>
                            <tr>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                            </tr>
                            <tr>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                            </tr>
                            <tr>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                                <td>测试测试</td>
                            </tr>
                        </tbody>

                        </table>
                    </div> */}

                </div>
            </div>
        )
    }
        
    
}